<template>
    <div v-loading="loading">
        <el-card>
            <template #header>
                <div>编辑大纲</div>
            </template>
            <el-form label-width="80px">
                <el-form-item label="大纲名称">
                    <el-input v-model="form.outlinename"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="editOutlineLogin">保存</el-button>
                    <el-button @click="$router.push({ name: 'OutlinesIndex' })">
                        取消
                    </el-button>
                </el-form-item>
            </el-form>
        </el-card>
    </div>
</template>
<script>
import { mapActions } from "vuex";
export default{
    // 映射
    props:["id"],
    // data 保存当前的数据绑定
    data(){
        return {
            loading:false,
            form:{
                outlinename:"",
            }
        }
    },
    async created(){
        await this.getOutlineLoading();
    },
    methods:{
        // 将 getOutline 映射到 this.getOutline
        ...mapActions("outlines",["editOutline","getOutline"]),
        // 数据回填
        async getOutlineLoading(){
            this.loading = true;
            try {
                const {data} = await this.getOutline(this.id);
                this.form.outlinename = data.outlinename;
            } catch (error) {}
            this.loading = false;
        },
        async editOutlineLogin(){
            this.loading = true;
            try {
                await this.editOutline({
                    id:this.id,
                    data:{outlinename:this.form.outlinename}
                });
                this.$message.success("编辑成功");
                this.$router.push({name:"OutlinesIndex"});
            } catch (error) {}
            this.loading = false;
        }
    }
}
</script>